<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        title="详情"
        :model-value="['Details'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="60%"
    >
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar h-96">
            <!-- 日志展示区域 -->
            <div v-if="detailData" class="p-6">
                <!-- 使用el-descriptions组件展示任务信息 -->
                <el-descriptions :border="true" column="1" class="mb-6">
                    <el-descriptions-item label="任务标题">
                        <span class="text-lg font-semibold">{{ detailData.title }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="站点">
                        <el-tag type="primary"> {{ detailData.site.name }} </el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="运行时间">
                        <span>{{ timeFormat(detailData.start_time) }} - {{ timeFormat(detailData.end_time) }}</span>
                    </el-descriptions-item>

                    <el-descriptions-item label="耗时">
                        <el-tag type="primary">{{ detailData.take }}</el-tag>
                    </el-descriptions-item>
                </el-descriptions>

                <!-- 循环展示日志数据 -->
                <div class="p-3 rounded-lg bg-gray-900 text-white overflow-auto  max-h-72">
                    <div v-for="(log, index) in detailData.logs" :key="log.id" class="mb-2">
                        <p class="whitespace-nowrap" :class="getLogClass(log.level)">
                            <span class="text-sm font-mono text-gray-400">[{{ timeFormat(log.create_time) }}]</span>
                            <span class="ml-2 font-semibold">{{ log.level.toUpperCase() }}</span>
                            <span class="mx-1">|</span>
                            <span>{{ log.message }}</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 如果没有日志 -->
            <div v-else class="p-4 text-center text-gray-500">
                暂无日志记录
            </div>
        </el-scrollbar>

        <template #footer>
            <div class="flex justify-end gap-1 mt-4">
                <el-button @click="baTable.toggleForm('')">返回</el-button>
                <el-button type="warning" :disabled="!(detailData?.status === 3 || detailData?.status === 4)"  @click="restartTask()">重启任务</el-button>
                <el-button type="primary" @click="fetchDetails()">刷新日志</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { inject, watch , ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
import {detail, push} from '/@/api/backend/routine/queueTask';
import { timeFormat } from "../../../../../utils/common";

const baTable = inject('baTable') as baTableClass
const detailData = ref(null) // 用于存储详情数据

// 监听 form.operate 的变化，判断是否打开了详情表单
watch(() => baTable.form.operate, (newValue) => {
    if (newValue === 'Details') {
        // 发送请求获取详情
        fetchDetails()
    }
})

//获取详情数据
const fetchDetails = async () => {
    try {
        baTable.form.loading = true
        const response = await detail(baTable.form.operateIds)
        detailData.value = response.data
    } catch (error) {
        console.error('获取详情失败:', error)
    } finally {
        baTable.form.loading = false
    }
}

// 根据日志级别返回不同的样式类
const getLogClass = (level) => {
    switch (level) {
        case 'debug':
            return 'text-purple-400'
        case 'info':
            return 'text-gray-400'
        case 'warning':
            return 'text-yellow-400'
        case 'error':
            return 'text-red-500'
        case 'success':
            return 'text-green-500 font-semibold'
        default:
            return 'text-gray-400'
    }
}

const restartTask = async () => {
    try {
        baTable.form.loading = true
        await push(baTable.form.operateIds)
    } catch (error) {
        console.error('获取详情失败:', error)
    } finally {
        baTable.form.loading = false
    }
}
</script>

<style scoped>
.ba-operate-dialog {
    max-width: 700px;
}
</style>
